<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>选择维修</title>
    <link href="../css/reset-html5.css" rel="stylesheet">
    <link href="css/wx-main.css?20161108_1" rel="stylesheet">
    <script src="../js/jquery-2.2.1.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <style>
        .top_tt{
            margin-top: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #dbdbdb;
        }
        #btn{
            margin-top: 15px;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
            padding: 13px 0;
            border-radius: 10px;
            width: 90%;
            margin-left: 5%;
        }
        #price{
            float: left;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        h4{
            font-weight: normal;
        }
        .flex-jst{
            /*display: flex;*/
            /*justify-content:center;*/
            /*flex-wrap:wrap;*/
        }
        .select_text_title {
            text-align: center;
            color: #fc643f;
        }
    </style>
</head>
<body class="body-bg" id="main">
    <header class="text-color1">
        <span class="left-btn text-color2" onclick="location.href='index.html?20161101'">
            首页
        </span>
        故障选择
    </header>
    <a href="tel:4000301388" class="phone_order"><img src="image/phone_order.png" alt=""></a>

    <div class="mar-top select-list-phone-fault">
        <div class="cut-off-line-1" style="height: 1px;"></div>

        <h4 class="select_text_title mar-top text-color2" id="step_1">请选择手机品牌</h4>

        <div class="mar-top mar-hor25">
            <div class="text-center">
                <span class="badge mar-hor" v-for="list in phoneList" v-text="list.name" v-bind:name="list.id" v-on:click="select_brand(list.id)" v-bind:class="{'active':brandId==list.id}"></span>
            </div>
        </div>
    </div>

    <div class="mar-top select-list-phone-fault" v-bind:class="{'hide':!brandId,'show_xg':brandId}" id="phone">
        <div class="cut-off-line-1" style="height: 1px;"></div>
        <h4 class="select_text_title mar-top text-color2" id="step_2">请选择手机机型</h4>
        <div class="mar-top mar-hor25">
            <div class="text-center flex-jst">
                <div v-for="list in phone_list" style="margin-top: 5px">
                    <span class="badge mar-hor" v-text="list.name" v-on:click="show_phone_info(list.phone_id)"  v-bind:class="{'active':phone_id==list.phone_id}" style="width: 60%"></span>
                </div>
            </div>
        </div>
    </div>


    <div class="mar-top select-list-phone-fault" v-bind:class="{'hide':!phone_id,'show_xg':phone_id}" id="color">
        <div class="cut-off-line-1" style="height: 1px;"></div>

        <h4 class="select_text_title mar-top text-color2">请选择手机颜色</h4>

        <div class="mar-top mar-hor25">
            <div class="text-center">
                <div v-for="list in phone_info.phone_color">
                    <span class="badge mar-hor" v-text="list.name" v-on:click="select_phone_color(list.id)" v-bind:class="{'active':phone_color_id==list.id}" style="width: 60%"></span>
                </div>
            </div>
        </div>
    </div>


    <div class="mar-top select-list-phone-fault" v-bind:class="{'hide':!phone_color_id,'show_xg':phone_color_id}" id="version">
        <div class="cut-off-line-1" style="height: 1px"></div>

        <h4 class="select_text_title mar-top text-color2">请选择手机版本</h4>

        <div class="mar-top mar-hor25">
            <div class="text-center">
                <div v-for="list in phone_info.phone_version">
                    <span class="badge mar-hor" v-text="list.name" v-on:click="select_phone_version(list.id)" v-bind:class="{'active':phone_version_id==list.id}" style="width: 60%"></span>
                </div>
            </div>
        </div>
    </div>


    <div class="mar-top select-list-phone-fault" v-bind:class="{'hide':!(phone_color_id && phone_version_id),'show_xg':(phone_color_id && phone_version_id)}" id="t1">
        <div class="cut-off-line-1" style="height: 1px"></div>

        <h4 class="select_text_title mar-top text-color2">请选择维修类型</h4>

        <div class="mar-top mar-hor25">
            <div class="text-center" id="main-fault">
                <span class="badge mar-hor"></span>
            </div>
        </div>
    </div>


    <div class="mar-top select-list-phone-fault hide one" id="one">
        <div class="cut-off-line-1" style="height: 1px"></div>

        <h4 class="select_text_title mar-top text-color2">请选择维修方案</h4>

        <div class="mar-top mar-hor25">
            <div class="text-center"  id="minor-fault">
                <div>

                </div>
            </div>
        </div>
    </div>

    <div class="text-center text-color2 white-bg" id="price" style="display: none">
        维修费用预估：<span class="primary-text" id="price_num">498元</span>  <span class="text-color3" style="font-size: 12px">(不含税)</span>
        <div class="primary-bg text-color2" id="btn" onclick="refer_order()">下一步</div>
    </div>

<div style="height: 100vh;clear: both;float: right" id="footer"></div>
</body>
<script src="../plugins/fast-click/fastclick.min.js"></script>
<script src="../js/phone.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
    var phoneList;
    var phoneFault;
    var phoneId;
    var colorId;
    var versionId;
    var faultMainId;
    var vue = new Vue({
        el:'#main',
        data:{
            phoneList:'',
            brandId:getQueryString('id'),
            phone_list:getQueryString('oid'),
            phone_info:'',
            phone_id:'',
            phone_color_id:'',
            phone_version_id:''
        },
        methods:{
            'showPhoneList':function(){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/index.php?m=Home&c=Index&a=getPhoneList',{},function(res){
                    if(res.code==200){
                        phoneList = res.data;
                        that.phoneList = res.data;
                        if(getQueryString('id')){
                            vue.select_brand(getQueryString('id'),getQueryString('oid'));
                        }

                    }else if(res.code==0){
                        login();
                    }
                    layer.close(index);
                },'json');
            },
            'select_brand':function(id,kid){
                this.brandId = id;
                this.phone_id = '';
                if(kid){
                    this.phone_id = kid;
                    this.show_phone_info(kid);
                }
                $('#footer').show();
                setTimeout(function(){
                    $("html,body").animate({scrollTop:$("#phone").offset().top-150},200);
                },100);
                this.phone_color_id='';
                this.phone_version_id='';
                $('.one').hide();
                $('#price').hide();
                for(var i in phoneList){
                    if(phoneList[i].id == id){
                        this.phone_list = phoneList[i].list;
                        break;
                    }
                }
            },
            'show_phone_info':function(id){
                this.phone_id = id;
                phoneId = id;
                this.phone_color_id='';
                this.phone_version_id='';
                $('.one').hide();
                $('#price').hide();
                var that = this;
                var data = {};
                data.phone_id = id;
                $('#minor-fault').html('');
                $('#footer').show();
                setTimeout(function(){
                    $("html,body").animate({scrollTop:$("#color").offset().top-150},1000);
                },100)
                var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/index.php?m=Home&c=Index&a=getPhoneFaultInfo',data,function(res){
                    if(res.code==200){
                        phoneFault = res.data.fault_info;
                        that.phone_info = res.data.phone_info;
                    }
                    layer.close(index);
                },'json');
            },
            'select_phone_color':function(id){
                colorId = id;
                $('.one').hide();
                $('#price').hide();
                 $('#minor-fault').html('');
                this.phone_version_id='';
                this.phone_color_id = id;
                if(this.phone_color_id && this.phone_version_id){
                    initFault(this.phone_color_id,this.phone_version_id)
                }
                $('#footer').show();
                setTimeout(function(){
                    $("html,body").animate({scrollTop:$("#version").offset().top-150},200);
                },100)
            },
            'select_phone_version':function(id){
                versionId = id;
                $('.one').hide();
                $('#price').hide();
                $('#minor-fault').html('');
                $('#footer').show();
                setTimeout(function(){
                    $("html,body").animate({scrollTop:$("#t1").offset().top-150},200);
                },150);
                this.phone_version_id = id;
                if(this.phone_color_id && this.phone_version_id){
                    initFault(this.phone_color_id,this.phone_version_id)
                }
            }
        },
        ready:function(){
            this.showPhoneList();
        }
    });




    function initFault(colorId,versionId){
        //显示主要维修项目
        var mainHtml = '';
        for(var i in phoneFault){
            for(var k in phoneFault[i].fault){
                var phone_color = phoneFault[i].fault[k].phone_color;
                var phone_version = phoneFault[i].fault[k].phone_version;
                if(isShowMain(colorId,versionId)){
                    mainHtml += '<span class="badge" name="'+phoneFault[i].id+'" style="width: 32%;margin: 8px 2%;float: left">'+phoneFault[i].name+'</span>';
                    break;
                }
            }
        }
        $('#main-fault').html(mainHtml);
        //是否显示
        function isShowMain(colorId,versionId){
            var i = $.inArray(colorId,phone_color);
            var k = $.inArray(versionId,phone_version);
            if(i>=0 && k>=0){
                return true
            }else{
                return false;
            }
        }
    }


    // 选择主维修
    $('#main-fault').on('click','.badge',function(){
//        $('#main-fault').find('.badge').removeClass('active');
        $(this).toggleClass('active');
        var id = $(this).attr('name');
        faultMainId = id;
        if($(this).hasClass('active')){
            showFaultInfo(id);
        }else{
            clearFaultInfo(id);
        }
        $('#price_num').text(get_weixiu_all_price()+'元');
    });

    // 选择次维修
    $('#minor-fault').on('click','.badge',function(){
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        var id = $(this).attr('name');
        $('#price_num').text(get_weixiu_all_price()+'元');
        $('#price').show();
        $('#footer').hide(1000);
        setTimeout(function(){
//            $("html,body").animate({scrollTop:$("#price").offset().top},500);
        },500);
    });


    function get_weixiu_all_price(){
        var all = 0;
        $('#minor-fault').find('.badge.active').each(function(){
            all+=parseInt($(this).attr('data-price'));
        });

        return all;
    }


    function showFaultInfo(id){
        var mainHtml = '<div name="'+id+'" class="top_tt">';
        for(var i in phoneFault){
            if(phoneFault[i].id==id){
                for(var k in phoneFault[i].fault){
                    var phone_color = phoneFault[i].fault[k].phone_color;
                    var phone_version = phoneFault[i].fault[k].phone_version;
                    var fault_id = phoneFault[i].fault[k].id;
                    if(isShowMain(colorId,versionId)){
                        var price = all_price_1(fault_id,id);
                        mainHtml += ' <span class="badge mar-hor clearFLoat" name="'+phoneFault[i].fault[k].id+'" data-price="'+(parseInt(phoneFault[i].fault[k].price)+parseInt(price))+'" style="width: 60%">'+phoneFault[i].fault[k].name+'</span><br>';
                    }
                }
            }
        }
        mainHtml += '</div>';
        $('#minor-fault').append(mainHtml);
        $('.one').show();
        setTimeout(function(){
            $("html,body").animate({scrollTop:$("#one").offset().top-150},200);
        },200);
        //是否显示
        function isShowMain(colorId,versionId){
            var i = $.inArray(colorId,phone_color);
            var k = $.inArray(versionId,phone_version);
            if(i>=0 && k>=0){
                return true
            }else{
                return false;
            }
        }
    }


    //总价第一部分
    function all_price_1(fault_id,id){
        var all_price = 0;
        for(var i in phoneFault){
            if(phoneFault[i].id==id){
                for(var k in phoneFault[i].fault){
                    if(phoneFault[i].fault[k].id==fault_id){
                        for(var j in phoneFault[i].fault[k].property){
                            if(phoneFault[i].fault[k].property[j].property_id==colorId || phoneFault[i].fault[k].property[j].property_id==versionId){
                                all_price+=parseInt(phoneFault[i].fault[k].property[j].price);
                            }
                        }
                    }
                }
            }
        }
        return all_price;
    }

    function clearFaultInfo(id){
        $('#minor-fault').find('div[name='+id+']').remove();
    }



    //提交订单
    function refer_order(){
        var data = {};
        var faults = [];
        data.phone_id = phoneId;
        data.color = colorId;
        data.version = versionId;

        $('#minor-fault').find('.badge.active').each(function(){
            faults.push(parseInt($(this).attr('name')));
        });

        data.faults = faults;

var index = layer.open({type: 2,shadeClose:false});
        $.post('../index/index.php?m=Home&c=Order&a=addOrder_one',data,function(res){
            if(res.code==200){
                localStorage.weixin_order_one = JSON.stringify(res.data);
                go_lucency_result();
                location.href = 'order_address.html?v=20161225';
            }
            layer.close(index);
        },'json');

    }


    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return '';
    }

</script>
</html>